<template>
  <div v-if="curRecommend" v-show="showRecommendInfo" @click="goRecommendDetail" class="recommend-box c-pa c-pz1 c-p-t24 c-bg-white c-p-l24 c-p-r24 c-br8 c-text-hidden  c-hh120 c-flex-row">
    <div @click.stop="clickCloseRecommend" class="c-pa c-p-t0 c-p-r0 c-ww40 c-hh40 c-br-bl8 c-flex-row c-flex-center c-pz1">
      <i class="iconfont c-fs16 c-fc-sgray">&#xe61b;</i>
    </div>
    <!-- 92 卷类 -->
    <div v-if="curRecommend.subProdType==92" class="c-text-hidden c-p all-coupon-bg c-flex-row c-flex-grow1">
      <div :class="curRecommend.type == 1 ? 'exchange-left' : 'coupon-left'" class="c-ww156 c-hh120 c-flex-shrink0">
        <div v-if="curRecommend.type == 1" class="c-fs32 c-fc-white c-pt36 c-textAlign-c">兑换券</div>
        <div v-else-if="curRecommend.type == 4" class="c-fs32 c-fc-white c-pt36 c-textAlign-c">抵价券</div>
        <section v-else>
          <div v-if="curRecommend.type == 5" class="c-fs40 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt28">{{curRecommend.price * 1}}<span class="c-fs20">折</span></div>
          <div v-else class="c-fs40 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt28"><span class="c-fs20">{{'￥' | iosPriceFilter('Live')}}</span>{{curRecommend.price.split('.')[0]}}</div>
          <div class="c-fs20 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt8">{{Number(curRecommend.amount) > 0 ? ('满' + curRecommend.amount.split('.')[0] + '元可使用') : '无门槛'}}</div>
        </section>
      </div>
      <div class="c-hh120 c-bg-white c-flex-grow1 c-text-hidden c-flex-column c-justify-sb c-pv8 c-ph20">
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{curRecommend.content}}</div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-fs20 c-fc-gray">
          <div v-if="curRecommend.validStatus == 1">领券当日起{{curRecommend.validPeriod}}天内可用</div>
          <div v-else-if="curRecommend.validStatus == 2">领券次日起{{curRecommend.validPeriod}}天内可用</div>
          <div v-else class="c-text-ellipsis1">{{curRecommend.startTime.replace(/-/g,'.').split(' ')[0]}} - {{curRecommend.endTime.replace(/-/g,'.').split(' ')[0]}}</div>
        </div>
        <div class="c-flex-row c-aligni-end">
          <div class="c-fs20 c-flex-grow1 c-fc-gray c-text-ellipsis1">
            {{curRecommend | couponApplyText}}</div>
          <div class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white" @click.stop="clickGoRecommendDetail">立即领取</div>
        </div>
      </div>
    </div>
    <div class="c-hh120 c-text-hidden c-p" :class="curRecommend.subProdType == 11 ? 'c-ww120':'c-ww180'" v-if="curRecommend.relationType!=relationTypeMap.coupon">
      <vip-custom-img :cover="curRecommend.vipInfo.cover" :imgClass="'c-h img-pe-none'" :hasText="false" v-if="curRecommend.vipInfo && curRecommend.vipInfo.cover" />
      <img v-else-if="curRecommend.subProdType == 11" class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/examination_defult.png'))" alt="" />
      <img v-else-if="curRecommend.subProdType == 7" class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/activity_defult.png'))" alt="" />
      <img v-else-if="curRecommend.subProdType == 8" class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/datum_defult.png'))" alt="" />
      <img v-else-if="curRecommend.subProdType == 1" class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/i/wap/course/vip.png'))" alt="" />
      <img v-else-if="curRecommend.subProdType == 23" class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/i/wap/course/svip.png'))" alt="" />
      <img v-else-if="curRecommend.subProdType == 76" class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/form_defult.png'))" alt="" />
      <img v-else class="c-w100 c-h img-pe-none" :src="$addXossFilter(curRecommend.imgUrl, require('@/assets/defult270.png'))" alt="" />
      <div class="c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">
        {{curRecommend.subProdType == 5 ? prodCourseType[curRecommend.voiceStatus]:prodMapType[curRecommend.subProdType]}}
      </div>
    </div>
    <div class="c-flex-grow1 c-w0 c-pl16 c-pr20 c-hh120 c-flex-column c-justify-sb" :class="curRecommend.subProdType == 7 && curRecommend.relationType==relationTypeMap.flashSales && curRecommend.atName ? 'c-pv8':'c-pv16'" v-if="curRecommend.relationType!=relationTypeMap.coupon">
      <div class="c-fs24 c-text-ellipsis1">
        <span class="bg-flashSales"
          v-if="curRecommend.relationType==relationTypeMap.flashSales || curRecommend.relationType==relationTypeMap.collage">{{curRecommend.relationType==relationTypeMap.flashSales?(Number(curRecommend.price) == 0 ? '限时免费' : '限时折扣'):'拼团'}}</span>
        {{curRecommend.content}}
      </div>
      <div v-if="curRecommend.subProdType == 7 && curRecommend.relationType==relationTypeMap.flashSales && curRecommend.atName" class="c-fs12 c-text-ellipsis1 c-fc-sblack">{{curRecommend.atName}}</div>
      <div class="c-flex-row">
        <div :class="curRecommend.subProdType == 76 ?'vis-hidden-important':''" class="c-fs24 c-fc-xlred c-flex-grow1 c-w0">
          <span v-if="curRecommend.relationId!=0 && curRecommend.relationType!=0 " class="c-fc-xlred c-flex-grow1 c-w0"><span
            class="c-fc-gray c-fs18 c-text-decoration-through c-mr8">{{'￥' | iosPriceFilter('Live')}}{{curRecommend.subContent}}</span><span
            class="c-fc-gray c-fs18 c-mr8">{{curRecommend.relationType==relationTypeMap.flashSales?'折后价':curRecommend.relationType==relationTypeMap.collage?'团长价':''}}</span><span>{{'￥' | iosPriceFilter('Live')}}{{curRecommend.relationType==relationTypeMap.collage?curRecommend.playersPrice:curRecommend.price}}</span></span>
          <span v-else-if="(curRecommend.relationId==0 && curRecommend.relationType==0)"><span
            v-if="curRecommend.payType == 2 || curRecommend.payType == 4">{{'￥' | iosPriceFilter('Live')}}</span>{{curRecommend.payType == 2 || curRecommend.payType == 4 ? `${curRecommend.subContent}` : curRecommend.payType == 3 ? '加密' : (curRecommend.payType==5 ? '购买指定课程参与':(curRecommend.payType==6 ? '指定人员购买':'免费'))}}</span>
        </div>
        <div v-if="(curRecommend.payType == 2 || curRecommend.payType == 4) && (curRecommend.subProdType == 12 || curRecommend.subProdType == 13)"
          class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white" @click.stop="clickGoRecommendDetail">{{recommendTextMap}}</div>
        <div v-else-if="curRecommend.payType == 2 || curRecommend.payType == 4" class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white" @click.stop="clickGoRecommendDetail">
          {{recommendTextMap | iosPayText('51')}}</div>
        <div v-else-if="curRecommend.payType == 1 || curRecommend.payType == 3 || curRecommend.payType == 5 || curRecommend.payType == 6"
          class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white">查看详情</div>
      </div>
    </div>
  </div>
</template>

<script>
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
export default {
  components: {
    VipCustomImg
  },
  props: {
    showRecommendInfo: {
      type: Boolean,
      default: false
    },
    recommendInfo: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isFromLive: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      prodMapType: global.prodMapType,
      prodCourseType: global.prodCourseType,
      relationTypeMap: global.relationTypeMap,
      curRecommend: null,
    };
  },
  watch: {
    recommendInfo: {
      handler: function (newArr) {
        console.log('---watch---recommendInfo---')
        if (newArr.length == 0) {
          this.curRecommend = null;
          return;
        }
        let sortArr = JSON.parse(JSON.stringify(newArr));
        sortArr.sort((item, nextItem) => {
          return nextItem.socialRoomMessageId - item.socialRoomMessageId;
        });
        this.curRecommend = sortArr[0];
      },
      immediate: true,
    }
  },
  computed: {
    recommendTextMap: function () {
      let textStr = '立即购买';
      switch (this.curRecommend.subProdType) {
        case 1:
        case 23:
          textStr = '立即升级';
          break;
        case 7:
        case 53:
          textStr = '立即报名';
          break;
        case 76:
          textStr = '立即填写';
          break;
        case 86:
          textStr = '立即预约';
          break;
      }
      return textStr;
    },
  },
  methods: {
    //查看好物推荐详情
    goRecommendDetail() {
      this.$emit('goRecommendDetail', this.curRecommend);
    },
    //查看好物推荐详情
    clickGoRecommendDetail() {
      this.$emit('clickGoRecommendDetail', this.curRecommend);
    },

    clickCloseRecommend(e) {
      this.$emit("update:showRecommendInfo", false);
    }
  },
  activated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.recommend-box {
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}
.button-buy {
  background: rgba(247, 114, 105, 1);
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/coupon_left.png") no-repeat 100%;
  background-size: 100% 100%;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-flashSales {
  display: inline-block;
  font-size: 0.4rem;
  padding: 0rem 0.25rem;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(255, 83, 85, 1) 0%,
    rgba(255, 83, 85, 0.7) 100%
  );
  border-radius: 0.35rem 0 0.35rem 0;
}
</style>
